<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08_全屏遮罩层</title>
  <style>
    .mask{
      background-color: rgba(0,0,0.3);
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
  </style>
</head>
<body>
<div class="mask"></div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci amet consectetur, fuga hic minima molestias
    nam quisquam temporibus vel voluptatibus! Commodi hic modi perspiciatis? Cum esse fuga illum nisi repellendus.
  </div>
  <div>Ab alias distinctio dolore est fugiat inventore nobis repellat sit voluptate? Et hic id ipsam laudantium nisi
    quas quos rem saepe, ut voluptates? Autem natus nulla saepe. Eum, eveniet optio.
  </div>
  <div>Dolorum quas quasi repellat tenetur vitae. Autem cupiditate doloribus eius eveniet facere impedit incidunt maxime
    necessitatibus, neque, numquam odio officia quaerat quidem reiciendis repellat sint veniam vitae voluptas?
    Asperiores, optio?
  </div>
  <div>A amet atque est libero, nostrum odio quia sint tenetur voluptatum? Aliquam eligendi enim, fugiat incidunt
    officia quis quos sint totam. At aut, cumque. Accusantium consequuntur debitis nisi pariatur soluta.
  </div>
  <div>Eum incidunt nobis officia quod ut voluptates? Dolor, et, magni. Accusamus atque consequuntur error harum illo,
    in itaque minima, nobis non numquam pariatur placeat sequi temporibus totam vitae? Nesciunt, possimus.
  </div>
  <div>Aliquam hic magni nemo, odio odit qui voluptatibus! Autem delectus dolore fugit illo illum libero minima
    molestiae necessitatibus nobis placeat porro quia quis quos reprehenderit, rerum suscipit temporibus ullam, unde!
  </div>
  <div>Accusantium, commodi dicta dolores ea eius eos error esse est eum fugiat harum impedit inventore modi nemo nisi
    nobis, nulla quas quia, soluta sunt? Est placeat praesentium quod sequi vitae.
  </div>
  <div>Accusantium asperiores corporis doloremque dolores eaque earum est illum itaque iure labore maxime minima modi
    nihil, non nulla, obcaecati perferendis perspiciatis porro possimus quae quisquam reiciendis sequi totam ullam
    voluptate!
  </div>
  <div>Ad adipisci delectus dolore illum minima veritatis. A architecto, consectetur culpa cumque delectus eaque eius
    eveniet fuga impedit labore libero minima nostrum provident quia quos voluptatem voluptatum. Aliquam beatae,
    ducimus!
  </div>
  <div>Architecto asperiores aspernatur cumque dignissimos eos exercitationem harum, illo illum ipsam itaque laborum
    laudantium libero nemo, nesciunt nihil nobis nostrum odit perferendis quasi quisquam, reiciendis repudiandae saepe
    sequi veniam voluptatibus?
  </div>
  <div>Cupiditate deserunt dicta eaque enim itaque perferendis possimus, quod tempore temporibus? Adipisci, animi
    asperiores corporis dolores dolorum error facere id in ipsa ipsum modi nam natus, quod tempora vitae voluptatum.
  </div>
  <div>Consectetur cupiditate doloribus fugit, illum quidem unde voluptatum? Ab accusantium est in odio optio quod quos
    ratione reiciendis velit vero. Aliquam at consequatur cupiditate distinctio ex ipsa perferendis reiciendis saepe.
  </div>
  <div>Assumenda deleniti doloremque doloribus earum explicabo libero maxime modi mollitia officiis pariatur, quam quas
    quos tempore temporibus, ullam voluptate voluptatibus. Cumque delectus hic rerum. Deserunt provident qui quibusdam
    quos tenetur?
  </div>
  <div>A accusantium aliquam atque eligendi, exercitationem fugit illo minus nesciunt non officia pariatur perferendis
    ratione sed sunt voluptatem. Ad, libero maiores neque nulla odit sequi tempora! Delectus non qui rem.
  </div>
  <div>Atque blanditiis commodi expedita ipsa molestiae sunt? Ad et itaque laborum magni odit repellat vitae! Alias amet
    deserunt ea eius explicabo minus, molestiae? Delectus, itaque magni quis repudiandae ut veniam.
  </div>
  <div>Alias aliquid aperiam atque beatae, dicta earum, eligendi labore libero, obcaecati quidem repellendus
    reprehenderit sunt voluptate. Aut, cum cupiditate eius eligendi minima nihil, non nulla obcaecati officia quaerat
    ullam ut.
  </div>
  <div>Accusantium alias aliquam consequuntur, delectus dolor ducimus error fuga iure, labore laborum nam natus
    necessitatibus nesciunt odit officiis perferendis quam quia quidem recusandae repellat soluta sunt suscipit, tempore
    totam vitae?
  </div>
  <div>A, ab accusamus ad aliquam aut, blanditiis consequatur dolore dolorem enim facere iste itaque laboriosam nesciunt
    nihil, pariatur quam quas qui quis quo ratione reiciendis reprehenderit sint tenetur vero vitae.
  </div>
  <div>Accusamus cum dignissimos ea id minima molestiae vel vitae. Adipisci assumenda atque aut blanditiis cupiditate
    eius error eveniet exercitationem explicabo fugit hic illo, iure laudantium, optio reiciendis rem tempora totam!
  </div>
  <div>A asperiores at consectetur dolor doloremque et hic impedit iusto laudantium nemo nulla officiis placeat
    provident quas, reprehenderit repudiandae sapiente. Architecto ducimus explicabo inventore iste minus quo reiciendis
    reprehenderit, voluptatem.
  </div>
  <div>Adipisci, architecto atque aut beatae cum eos eum illo iste molestias neque. A, accusamus ea earum eius facere
    fuga illo inventore modi, nihil nulla quod reiciendis reprehenderit sunt suscipit, veniam?
  </div>
  <div>A alias consequatur doloremque eum excepturi illum labore magni maxime minima nemo, nostrum numquam, pariatur
    perspiciatis porro quam, quas quidem rem saepe sed sint sunt suscipit tempore veniam vero vitae?
  </div>
  <div>Ad delectus deserunt obcaecati placeat rerum, vel velit veniam? Ad alias aliquid debitis, dicta dolore ducimus
    fugiat fugit id illo in ipsa ipsam iure iusto laudantium qui quia temporibus unde.
  </div>
  <div>Aliquam consequatur cum cumque cupiditate deleniti ea eos eum fugiat in iure nam nostrum officiis pariatur
    perspiciatis quas, repudiandae, unde, ut? Ab corporis eaque est expedita incidunt minima nam, provident.
  </div>
  <div>Aliquam ea, eligendi harum hic illo in, iusto maiores molestiae nobis omnis placeat quod, sunt tempora. Adipisci
    animi hic molestias. Aliquam debitis eos exercitationem id illo in laborum officia quod?
  </div>
  <div>Amet asperiores aspernatur eveniet inventore maxime reprehenderit saepe sed, temporibus? Assumenda atque deleniti
    dignissimos nemo ullam. Adipisci atque deserunt dicta, dolorem esse et, excepturi exercitationem hic incidunt
    pariatur, praesentium vitae!
  </div>
  <div>Accusantium animi, blanditiis cupiditate debitis dicta ea, ex fugiat, inventore ipsam itaque libero mollitia
    numquam pariatur tempore ut velit vero voluptatem. Consectetur corporis error facilis inventore ipsam quisquam
    reprehenderit soluta?
  </div>
  <div>Illo minima provident vero. Ad autem consectetur culpa cumque debitis ducimus eaque eum explicabo iste minima
    mollitia neque odit officia, perferendis quis repellendus sit, sunt tenetur vel veritatis vero voluptate?
  </div>
  <div>Aperiam dolorum ea incidunt labore magni nostrum obcaecati officia qui veritatis. A eos excepturi quasi
    repellendus similique sunt voluptatum? Accusamus animi autem cupiditate eligendi explicabo placeat quia quis rerum
    voluptatibus!
  </div>
  <div>Accusantium alias assumenda atque deleniti dicta distinctio, dolorum eaque, harum impedit incidunt ipsum iste
    mollitia nemo nisi placeat possimus quae quia quibusdam sequi, suscipit temporibus velit veniam vero voluptatibus
    voluptatum.
  </div>
  <div>Possimus, temporibus, vero? Aliquam assumenda at autem commodi dolor ducimus eaque fuga iure laboriosam magni
    minus nesciunt nihil nisi nobis numquam omnis possimus, quasi quibusdam quisquam quos repellendus tenetur
    voluptatibus.
  </div>
  <div>Adipisci aliquam assumenda aut, commodi corporis, culpa dolore dolores expedita fugiat impedit inventore iusto
    laboriosam minus modi molestiae, nostrum placeat provident quibusdam recusandae vitae. Ad at earum quibusdam sit
    tenetur.
  </div>
  <div>Aliquam animi, aspernatur at atque autem beatae cumque doloremque eius expedita fuga fugit labore laborum
    laudantium libero maiores, mollitia nesciunt, numquam officiis pariatur repellendus saepe suscipit tempora voluptas!
    Asperiores, blanditiis?
  </div>
  <div>Aliquam asperiores dolore eaque earum enim, eos id ipsam laboriosam maiores modi molestiae nam neque nisi nostrum
    numquam odit provident tenetur, totam voluptatem voluptates! Assumenda beatae magni officia sequi temporibus!
  </div>
  <div>Alias aliquid architecto commodi consequatur cum doloribus ea eius expedita in molestiae nihil officia officiis
    perspiciatis quae, quasi quidem quo similique sunt suscipit tenetur ullam ut vitae voluptate! Hic, neque.
  </div>
  <div>Blanditiis, doloremque eum expedita fugiat maxime mollitia neque officia officiis, optio perspiciatis quaerat
    quo. At cum deleniti dicta doloremque dolorum et explicabo iure natus nemo non, placeat ratione velit voluptate!
  </div>
  <div>Accusamus, asperiores blanditiis commodi culpa cum delectus dignissimos dolor doloremque dolores eaque itaque
    magni nemo neque nulla numquam perspiciatis ratione, sit, soluta voluptatem voluptatum. Aliquid hic ipsum natus
    perferendis placeat!
  </div>
  <div>Ad corporis dicta dolor ea eius eos, et exercitationem ipsa ipsum labore laboriosam, laudantium modi mollitia
    nisi non nostrum numquam pariatur, quaerat ratione repellat repellendus reprehenderit soluta ullam veniam
    voluptates.
  </div>
  <div>Commodi cumque debitis deserunt eius facilis nobis temporibus totam vero? Dicta mollitia nemo nobis quas vero?
    Animi, blanditiis dignissimos dolore enim esse et hic iure, nobis optio perspiciatis suscipit voluptatibus!
  </div>
  <div>Aliquid amet aperiam, culpa ducimus explicabo laboriosam neque pariatur perferendis quasi quidem recusandae saepe
    sint. Assumenda at, doloribus eos eum itaque libero minus molestias quidem recusandae repellat sed ut, veniam!
  </div>
  <div>At fugiat, nobis quasi rem suscipit voluptas! Aut iste obcaecati porro sed velit. A fuga odit voluptatem. Error
    exercitationem laboriosam laudantium maxime mollitia nobis odio, omnis reiciendis reprehenderit saepe voluptatum!
  </div>
  <div>Animi autem doloribus eos neque! Aliquid amet commodi enim eum ex, facilis in ipsa maiores, minus odit porro quis
    quisquam repellat? Adipisci exercitationem, odio reiciendis sit suscipit velit. Architecto, voluptatum!
  </div>
  <div>Accusantium aliquam amet, atque consequatur distinctio eius explicabo ipsam labore laboriosam laborum maiores
    neque optio, porro quam, quasi recusandae rem similique soluta vel voluptate? Corporis enim impedit ipsam iste
    porro.
  </div>
  <div>Aliquid aut autem consequuntur earum eos ipsam laudantium odit sit? Debitis odit quam reprehenderit vitae
    voluptates. Aspernatur assumenda deserunt est laudantium neque quas quasi, quidem voluptas voluptate. Deleniti,
    dicta eaque.
  </div>
  <div>Consequuntur quasi quia ut! Debitis excepturi minima natus quia reiciendis tenetur voluptatum. Eligendi nemo quos
    soluta. Aspernatur atque culpa dolores earum eligendi ex laudantium sint unde velit voluptatibus! Dolorum, quisquam!
  </div>
  <div>Alias consequuntur eveniet harum numquam sapiente. In modi, quas. Ad consequuntur cumque dolorem esse fuga illo
    itaque perferendis vero. Amet atque aut cum eum fugiat hic, laudantium quae reprehenderit velit?
  </div>
  <div>Accusantium consectetur, doloremque dolores, facere incidunt natus officiis possimus quos rem sint tempora velit
    veritatis voluptates! Amet animi enim, facilis impedit ipsa iste nihil reiciendis rem, sint, sunt unde veniam.
  </div>
  <div>Consequatur distinctio inventore officia! Accusantium architecto blanditiis cum dolorum hic inventore iusto
    laboriosam modi ratione! Asperiores ea eveniet labore perspiciatis quibusdam. Dolor fugiat iure iusto magni nobis,
    quo quod sunt.
  </div>
  <div>A accusantium, blanditiis consequuntur culpa error fugiat incidunt, inventore labore magnam nisi nobis nulla quis
    rem rerum tempore veritatis voluptate voluptatem. Aliquid aperiam cum deserunt dignissimos facilis pariatur, quaerat
    ullam?
  </div>
  <div>Accusamus, ad animi aut dolorem esse in inventore itaque libero, magnam nihil non nulla quidem soluta tempore
    vel! Asperiores delectus dignissimos dolor dolore eaque est iste optio quis soluta voluptate!
  </div>
</div>
</body>
</html>